---
title: JSX
---

import jsx from '../../../examples/files/jsx.js'
import jsxChildren from '../../../examples/files/jsxChildren.js'

## What is JSX?

JSX is an extension to the JavaScript language that adds a new kind of _expression_, the **JSX expression**<Details>, used to create React elements (which we'll cover soon)</Details>.

JSX expressions are a concise syntax for calling the API, `React.createElement(type, props, ...children)`.

We can use JSX expressions anywhere we could use any other expression, e.g. in a `return` statement or variable assignment.

---

## Type

Like XML, each JSX expression has a tag, e.g. `<View />`, which is then transformed into a call to `React.createElement(View)`. In this case, `View` is the **type** of the element.

<Example panes={['editor', 'transpiler']} code={`const element = <View />`} />

> On the right in the example above, we can see how our JSX expressions are compiled by babel.

---

## Props

Any JSX _attributes_ become **props** (parameters) of the React element. The value of an attribute can be a string, like `foo="hello"`, or it can be any JavaScript expression when wrapped in curly braces, as in `bar={baz}` (which would set the value of the `bar` prop to `baz`).

<Example
  panes={['editor', 'transpiler']}
  code={`const element = <View foo="hello" bar={baz} />`}
/>

---

## Children

Any children elements should go between the opening tag, `<View>`, and closing tag `</View>`. Elements without children can use a self-closing tag, like `<View />`, as a shorthand.

<Example panes={['editor', 'transpiler']} code={jsx} />

> When a JSX element wraps to multiple lines, we often write it with parentheses around it, since it looks nicer.

---

## Interpolation

Children are generally other elements, but can also be any other kind of expression if wrapped in curly braces, `{ ... }`.

<Example panes={['editor', 'transpiler']} code={jsxChildren} />

---

## Why JSX?

The XML-like syntax is typically more concise, easier to read, and visually looks a little like the generated UI (both are tree-like).

We don't _have to_ use JSX, but there are few disadvantages, so we almost always use it.
